<template>
  <div class="q-pa-md">
    <div class="row items-center">
      <div class="q-pb-md text-h5">
        {{pageTitle}}
      </div>
    </div>
    <!--错误提示-->
    <q-banner class="text-white bg-red q-mb-sm" dense inline-actions v-if="serverErrorMessage">
      {{ serverErrorMessage }}
      <template v-slot:action>
        <q-btn @click="serverErrorMessage = ''" dense flat icon="close" size="sm" />
      </template>
    </q-banner>
    <q-banner class="text-white bg-warning q-mb-sm" dense inline-actions v-if="serveWarningMessage">
      {{ serveWarningMessage }}
      <template v-slot:action>
        <q-btn @click="serveWarningMessage = ''" dense flat icon="close" size="sm" />
      </template>
    </q-banner>
    <div class="q-pa-sm shadow-2">
      <div class="row q-col-gutter-sm">
        <div class="searchbar-label">托盘号</div>
        <div class="col-12 col-sm-6 col-md-4 col-lg-3">
          <q-input :hide-bottom-space="true" dense :maxlength="40" outlined square stack-label
            :loading="listDataLoadingState" no-error-icon v-model="$d.palletNo" @keyup.enter="getVlpnInfoForSap" autofocus
            clearable @focus="fx.ui.select" >
            <template v-slot:after>
              <q-btn style="width:40px" color="primary" dense @click="getVlpnInfoForSap"
                :disable="!$d.palletNo || listDataLoadingState">
                <q-icon name="keyboard_return" />
              </q-btn>
            </template>
          </q-input>
        </div>
        <div class="searchbar-label">Batch号</div>
        <div class="col-12 col-sm-6 col-md-4 col-lg-3">
          <q-input :hide-bottom-space="true" dense :maxlength="40" outlined square stack-label
            :loading="listDataLoadingState" no-error-icon v-model="$d.batch" @keyup.enter="getVlpnInfoForSap"
            clearable @focus="fx.ui.select" >
            <template v-slot:after>
              <q-btn style="width:40px" color="primary" dense @click="getVlpnInfoForSap"
                :disable="!$d.batch || listDataLoadingState">
                <q-icon name="keyboard_return" />
              </q-btn>
            </template>
          </q-input>
        </div>
      </div>
    </div>
    <div class="shadow-2 q-mt-md">
      <q-table :columns="columnsInfo" :rows="$d.vlpnInfoForSaps" :hide-pagination="true" hide-selected-banner @update:selected="gettLpn"
        :loading="listDataLoadingState" :visible-columns="$d.visibleColumns" v-model:pagination="$d.paginationInfo" style="max-height: 500px" @selection="selectedItemsChanged"
        binary-state-sort color="primary" dense flat separator="cell" selection="multiple" row-key="vlpn" v-model:selected="$d.selectedItems">
        <!--无数据提示-->
        <template v-slot:no-data>
          <div class="full-width items-center justify-center row">
            <q-icon name="error_outline" />
            无数据
          </div>
        </template>
      </q-table>
    </div>
    <div class="q-pa-sm shadow-2 q-mt-md">
      <div class="row q-col-gutter-sm">
        <div class="searchbar-label">SAP库存状态调整为</div>
        <div class="col-12 col-sm-6 col-md-4 col-lg-3">
          <simple-filter-select
            :options="$d.tSapStockTypeDropdownList" :use-filter="false"
            option-label="whName" option-value="whId" v-model="$d.tSapStockType"
            :auto-select-single-option="true" @update:model-value="tSapStockTypeChanged" />
        </div>
        <div class="searchbar-label">变更原因</div>
        <div class="col-12 col-sm-6 col-md-4 col-lg-3">
          <simple-filter-select
            :options="actionCodeFilter" :use-filter="false"
            option-label="label" option-value="value" v-model="$d.actionCode"
            :auto-select-single-option="true" />
        </div>
        <div class="searchbar-label">目的栈板</div>
        <div class="col-12 col-sm-6 col-md-4 col-lg-3">
          <easy-input v-model="$d.tLpn" />
        </div>
        <div>
          <q-btn @click="changeSapStockType" color="primary" label="确定" :disable="$d.selectedItems.length === 0 || !$d.tSapStockType || !$d.tLpn || !$d.actionCode" :loading="changeSapStockTypeState" />
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import {useTitleHelper} from '@njt/foundation/hooks/titleHelper'
import { computed, reactive, ref } from 'vue';
import { ColumnInfo } from '@njt/foundation/defs/comm'
import _ from 'lodash'

const pageTitle = '更改SAP库存状态'
useTitleHelper(pageTitle)
//列表数据加载状态
let listDataLoadingState = ref(false)
let serverErrorMessage = ref('')

let $d = reactive({
  actionCode: null,
  palletNo: null,
  batch: null,
  vlpnInfoForSaps: [] as Record<string, any>,
  selectedItems: [] as Record<string, any>,
  visibleColumns: ['palletNo', 'vlpn', 'batch', 'qtyAvailable', 'sapStockType'],
  // 分页参数
  paginationInfo: {
    // 页码
    page: 1,
    // 每页多少条
    rowsPerPage: 0
  },
  tSapStockTypeDropdownList: ['F', 'Q', 'S'],
  tSapStockType: null,
  tLpn: null,
  actionCodeDropdownList: [
    {
      label: 'AB|UNRESTRICTED TO BLOCKED -AUTOBATCHBLK',
      value: 'AB',
      sapStockType: 'F',
      tSapStockType: 'S'
    },
    {
      label: 'AD|UNRESTRICTED TO BLOCKED - DAMAGED',
      value: 'AD',
      sapStockType: 'F',
      tSapStockType: 'S'
    },
    {
      label: 'AE|UNRESTRICTED TO BLOCKED - EXPIRED',
      value: 'AE',
      sapStockType: 'F',
      tSapStockType: 'S'
    },
    {
      label: 'AI|UNRESTRICTED TO QI HELD - INSPECTION',
      value: 'AI',
      sapStockType: 'F',
      tSapStockType: 'Q'
    },
    {
      label: 'AS|UNRESTRICTED TO BLOCKED -BLK FORSCRAP',
      value: 'AS',
      sapStockType: 'F',
      tSapStockType: 'S'
    },
    {
      label: 'BA|BLOCKED TO UNRESTRICTED -AUTOBATCHBLK',
      value: 'BA',
      sapStockType: 'S',
      tSapStockType: 'F'
    },
    {
      label: 'BB|DHL ERROR - BLOCK TO BLOCK - SUPPRESS',
      value: 'BB',
      sapStockType: 'S',
      tSapStockType: 'S'
    },
    {
      label: 'BI|BLOCKED TO QI HELD - INSPECTION',
      value: 'BI',
      sapStockType: 'S',
      tSapStockType: 'Q'
    },
    {
      label: 'DA|BLOCKED TO UNRESTRICTED - DAMAGED',
      value: 'DA',
      sapStockType: 'S',
      tSapStockType: 'F'
    },
    {
      label: 'DB|DAMAGED TO BLOCKED',
      value: 'DB',
      sapStockType: 'F',
      tSapStockType: 'S'
    },
    {
      label: 'DI|BLOCKED TO QI HELD - INSPECTION',
      value: 'DI',
      sapStockType: 'S',
      tSapStockType: 'Q'
    },
    {
     label: 'EA|BLOCKED TO UNRESTRICTED - EXPIRED',
     value: 'EA',
     sapStockType: 'S',
     tSapStockType: 'F'
    },
    {
     label: 'EI|BLOCKED TO QI HELD - INSPECTION',
     value: 'EI',
     sapStockType: 'S',
     tSapStockType: 'Q'
    },
    {
     label: 'IA|QI HELD TO UNRESTRICTED - INSPECTION',
     value: 'IA',
     sapStockType: 'Q',
     tSapStockType: 'F'
    },
    {
     label: 'IB|QI HELD TO BLOCKED - AUTO BATCH BLOCK',
     value: 'IB',
     sapStockType: 'Q',
     tSapStockType: 'S'
    },
    {
     label: 'ID|QI HELD TO BLOCKED - DAMAGED',
     value: 'ID',
     sapStockType: 'Q',
     tSapStockType: 'S'
    },
    {
     label: 'IE|QI HELD TO BLOCKED - EXPIRED',
     value: 'IE',
     sapStockType: 'Q',
     tSapStockType: 'S'
    },
    {
     label: 'IS|QI HELD TO BLOCKED -BLOCKED FOR SCRAP',
     value: 'IS',
     sapStockType: 'Q',
     tSapStockType: 'S'
    },
    {
    label: 'SI|UNRESTRICTED TO QI HELD - AUTO BATCH BLOCK',
    value: 'SI',
    sapStockType: 'S',
    tSapStockType: 'Q'
    },
  ],
})

let sapStockType = computed(() => {
  let sapStockTypes = _.map($d.selectedItems, 'sapStockType')
  if (_.uniq(sapStockTypes).length === 1) {
    return sapStockTypes[0]
  } else {
    return null
  }
})

let serveWarningMessage = computed(() => {
  let sapStockTypes = _.map($d.selectedItems, 'sapStockType')
  if (_.uniq(sapStockTypes).length > 1) {
    return '库存状态不一致'
  } else {
    return ''
  }
})

let actionCodeFilter = computed(() => {
  return _.filter($d.actionCodeDropdownList, (item) => {
    return item.sapStockType === sapStockType.value && item.tSapStockType === $d.tSapStockType
  })
})

// 列参数
let columnsInfo: ColumnInfo[] = [
  {
    label: '托盘号',
    name: 'palletNo',
    field: 'palletNo',
    align: 'left',
  },
  {
    label: '箱号',
    name: 'vlpn',
    field: 'vlpn',
    align: 'left',
  },
  {
    label: 'Batch',
    name: 'batch',
    field: 'batch',
    align: 'left',
  },
  {
    label: '数量',
    name: 'qtyAvailable',
    field: 'qtyAvailable',
    align: 'left',
  },
  {
    label: '库存状态',
    name: 'sapStockType',
    field: 'sapStockType',
    align: 'left',
  }
]

const getVlpnInfoForSap = () => {
  $d.selectedItems = []
  $d.vlpnInfoForSaps = []
  $d.actionCode = null
  serverErrorMessage.value = ''
  let params = {
    palletNo: $d.palletNo,
    batch: $d.batch
  }
  listDataLoadingState.value = true
  $f.axios.get('/project/mhlbc/inv/inventory/get-vlpn-info-for-sap', {params})
    .then((resp) => {
      $d.vlpnInfoForSaps = resp.data.vlpnInfoForSaps
      $d.tLpn = null
      $d.tSapStockType = null
    })
    .catch((err) => {
      serverErrorMessage.value = $f.getAxiosErrMsg(err)
    })
    .finally(() => {
      listDataLoadingState.value = false
    })
}


let changeSapStockTypeState = ref(false)

const changeSapStockType = () => {
  serverErrorMessage.value = ''
  let params = {
    vlpns: _.map($d.selectedItems, 'vlpn'),
    tSapStockType: $d.tSapStockType,
    tLpn: $d.tLpn,
    actionCode: $d.actionCode
  }
  changeSapStockTypeState.value = true
  $f.axios.post('/project/mhlbc/inv/inventory/change-sap-stock-type', params)
    .then(() => {
      $d.tSapStockType = null
      $d.tLpn = null
      $d.selectedItems = []
      $d.actionCode = null
      $f.ui.showNotifySucceeded('更改SAP库存状态成功')
      getVlpnInfoForSap()
    })
    .catch((err) => {
      serverErrorMessage.value = $f.getAxiosErrMsg(err)
    })
    .finally(() => {
      changeSapStockTypeState.value = false
    })
}

const gettLpn = (event: any) => {
  let palletNos = _.uniq(_.map(event, 'palletNo'))
  if (palletNos.length === 1) {
    $d.tLpn = palletNos[0]
  } else {
    $d.tLpn = null
  }
}

const tSapStockTypeChanged = () => {
  $d.actionCode = null
}

const selectedItemsChanged = () => {
  $d.actionCode = null
}

const fx = $f
</script>